<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="robots" content="noindex,nofollow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="/webdot/icon.png">
<title>WebDot Tutorial: Clickable nodes</title>
</head>
<body bgcolor="white">
<a href="/webdot/basicpublic.html">[previous]</a>
<a href="/webdot/hedges.html">[next]</a>
<font size="+2"><b>WebDot Tutorial: Clickable nodes</b></font>
<p>
<a href="/cgi-bin/webdot/webdot/hnodes.dot.dot.map">
<img src="/cgi-bin/webdot/webdot/hnodes.dot.dot.png" ismap>
</a>
<p>
A graph can contain URLs so that the nodes and background are clickable, e.g.:
<table border="1"><tr><td><pre>
digraph G {
        graph [URL="default.html"]
        a [URL="a.html"]
        b [URL="b.html"]
        c [URL="c.html"]
        a -&gt; b -&gt; c
        a -&gt; c
}
</pre></td></tr></table>
<p>
To respond to user mouse events, a map must be provided.  WebDot supports either
server-side or client-side maps.  First we describe server-side maps.
<p>
The mapping information is generated dynamically from the same graph source
file as the image, using this construct:
<table border="1"><tr><td><pre>
&lt;a href="/cgi-bin/webdot/webdot/hnodes.dot.dot.map"&gt;
&lt;img src="/cgi-bin/webdot/webdot/hnodes.dot.dot.png" ismap&gt;
&lt;/a&gt;
</pre></td></tr></table>
<p>
Which produces the graph at the top.
Note that the "Graph by WebDot" signature is also hyperlinked to a
customized help page.
</body>
</html>
